<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>营销系统-优惠券明细</title>
    <script src="../../../../static/js/vue.js" th:src="@{/js/vue.js}"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="../../../../static/css/element.css" th:href="@{/css/element.css}">
	<link rel="stylesheet" href="../../../../static/css/global.css" th:href="@{/css/global.css}" />
	<link rel="stylesheet" href="../../../../static/css/main.css" th:href="@{/css/main.css}" />
	<link rel="stylesheet" href="../../../../static/css/myelement.css" th:href="@{/css/myelement.css}" />
	<!-- 引入组件库 -->
	<script src="../../../../static/js/element.js" th:src="@{/js/element.js}"></script>
	<script src="../../../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
</head>
<body>
<div id="app">
    <div class="main-content" v-cloak>
    	<!-- 页面头部 -->
		<div class="page-header">
			<h1 class="page-title">优惠券明细</h1>
			<div class="breadcrumb"><a href="javascript:top.location.reload();">首页</a><span>/</span>营销<span>/</span><a href="/vendor/promotion/coupon/tolist">优惠券列表</a></div>
		</div><!-- 页面头部 end -->
    
    	<div class="main-content-body">
    		<div class="view-title"><h2 class="title_h">基础信息</h2></div>
            <table class="table-view">
                <tr>
                    <th width="15%">优惠券名称</th>
                    <td width="35%">{{dto.couponName}}</td>
                    <th width="15%">启停</th>
                    <td width="35%">{{dto.state?'启用':'停用'}}</td>
                </tr>
                <tr>
                    <th>面值</th>
                    <td>{{dto.couponPrice}} 元</td>
                    <th>使用条件</th>
                    <td>满 {{dto.reachPrice}} 元可用</td>
                </tr>
                <tr>
                    <th>有效开始时间</th>
                    <td>{{dto.startValidTime}}</td>
                    <th>有效结束时间</th>
                    <td>{{dto.endValidTime}}</td>
                </tr>
                <tr>
                    <th>总发布数量</th>
                    <td>{{dto.totalCount}} 张</td>
                    <th>已生成数量</th>
                    <td>{{dto.generateCount}} 张</td>
                </tr>
                <tr>
                    <th>使用数量</th>
                    <td>{{dto.useCount}} 张</td>
                    <th>每人限领数量</th>
                    <td v-if="dto.limitCount > 0">{{dto.limitCount}} 张</td>
                    <td v-else>不限领</td>
                </tr>
                <tr>
                    <th>优惠券类别</th>
                    <td>{{dto.couponTypeName}}</td>
                    <th>获取方式</th>
                    <td>{{dto.obtainTypeName}}</td>
                </tr>
                <tr>
                    <th>适用终端</th>
                    <td>{{dto.couponClientName}}</td>
                    <th>创建时间</th>
                    <td>{{dto.createTime}}</td>
                </tr>
            </table>

            <div class="view-title"><h2 class="title_h">明细</h2></div>
            <div class="list-content">
                <!--条件筛选-->
                <div class="content_item_filter clearfix">
                    <div class="input-select fl btn-radid_none">
                        <div class="filter-form filter-form-one clearfix" v-bind:class="[hasfilterMore?'content_filter_more':'']">
                            <el-input placeholder="会员名称/订单号" clearable v-model="conditions['customerName#orderId'].value" class="minW40 z_input-holder" >
                            </el-input>

                        </div>

                        <div class='filter-form filter-form-more clearfix' v-show="filterMore"></div>

                        <div class="filter-operate">
                            <div class="filter-more" @click="toggleMoreSearch" v-show="hasfilterMore"><i v-bind:class="[filterMore?'el-icon-arrow-up':'el-icon-arrow-down']"></i></div>
                            <el-tooltip class="item" content="查询" placement="bottom-start">
                                <el-button icon="el-icon-search" @click="querycoupondetail"></el-button>
                            </el-tooltip>
                            <el-tooltip class="item" content="清空" placement="bottom-start">
                                <el-button icon="el-extend-clean" @click="clearcoupondetail"></el-button>
                            </el-tooltip>
                        </div>
                    </div>
                </div>

                <!--主体表格-->
                <div class="z-tables">
                    <el-table ref="multipleTable" :data="coupondetailList" v-loading="loading" style="width: 100%;">
                        <el-table-column prop="couponName" label="优惠券名称" min-width="120"></el-table-column>
                        <el-table-column prop="customerName" label="会员名称" min-width="100"></el-table-column>
                        <el-table-column prop="receiveTime" label="领用时间" min-width="100"></el-table-column>
                        <el-table-column prop="stateName" label="状态" min-width="100"></el-table-column>
                        <el-table-column prop="useTime" label="使用时间" min-width="100"></el-table-column>
                        <el-table-column prop="orderId" label="订单号" min-width="100"></el-table-column>
                        <el-table-column prop="orderPrice" label="订单金额" min-width="100"></el-table-column>
                    </el-table>
                </div>

                <!--分页-->
                <div class="grid-content">
                    <div class="bg-purple-light">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="currentPage"
                                :page-sizes="pageSizeList"
                                :page-size="pageSize"
                                layout="total, sizes, prev, pager, next"
                                :total="totalNum">
                        </el-pagination>
                    </div>
                </div>
    	</div>
    	
    	<div class="edit-button-fixed">
            <div class="edit-button z-yuan-butn">
       			<el-button type="primary" @click="returnList">返回</el-button>
			</div>
		</div>
					
   	</div>
</div>
</body>
<script th:inline="javascript">
    new Vue({
        el: "#app",
        data:{
        	dto : [[${dto}]],
            coupondetailList: [],
            tableAllCheck: false,
            hasfilterMore: false,  // 列表是否拥有更多筛选条件
            filterMore: false,  // 列表更多筛选条件是否展示
            conditions: {
                "customerName#orderId": {
                    "operation": "ORLIKE",
                    "value": ""
                }
            },
            pageSizeList: [5, 10, 20, 50],
            totalNum: 0,
            currentPage: 1, //当前页码数
            pageSize: 10,
            act: 0, //tab选项
            isLeft: false, //左右阴影
            isRight: false,
            loading: true
        },
        mounted: function () {
            this.querycoupondetail();
        },
        methods: {
            handleSizeChange: function (val) {
                this.pageSize = val;
                this.querycoupondetail();
            },
            handleCurrentChange: function (val) {
                this.currentPage = val;
                this.querycoupondetail();
            },
            toggleMoreSearch(){
                this.filterMore = !this.filterMore;
            },
            querycoupondetail: function() {
                var self = this;
                self.loading = true;
                var queryMessage = {
                    "queryPage": self.currentPage,
                    "pageShow": self.pageSize,
                    "queryParams": self.conditions,
                    "sortMap": {}
                };
                $.ajax({
                    url: "/vendor/promotion/coupondetail/list",
                    type: "POST",
                    data: JSON.stringify(queryMessage),
                    contentType: "application/json;charset=UTF-8",
                    dataType: "json",
                    success: function(data) {
                        if (data && data.returnCode == "1") {
                            self.coupondetailList = data.returnMessage;
                            self.totalNum = data.pager.totalNum;
                        }
                        self.loading = false;
                    }
                });
            },
            clearcoupondetail: function() {
                var self = this;
                self.conditions['customerName#orderId'].value = "";
            },
        	returnList: function () {
        		window.location.href = "/vendor/promotion/coupon/tolist";
            }
        }
    });
</script>
</html>
